{* $Id$ *}
{include_core file="admin/lib/header.html" title="地区展示"}
<div class="page-header border-bottom clearfix">
  <h2 class="left">地区管理<span>{if $info}编辑{else}添加{/if}省市区</span></h2>
  <a href="{AnUrl('area/admin')}" class="btn btn-default btn-sm right">&lt;&nbsp;返回地区列表</a>
</div>
<!--start:省市区新增-->
<div class="add-form">
  <form class="js_creatForm" action="{AnUrl('area/admin/save')}" method="post" enctype="multipart/form-data">
    <table class="table" cellpadding="0" cellspacing="0">
      <tr>
        <th><label for="" class="add-f-label">所属省市区：</label></th>
      </tr>
      <tr>
        <th><label for="" class="add-f-label">省份：</label></th>
        <td>
          <div>
            <select name="province" class="js_provinceList" style="width:200px;">
              <option value="" selected="selected">请选择省份</option>
            </select>
          </div>
        </td>
      </tr>
      <tr {if !$area.province}style="display:none"{/if}>
        <th><label for="" class="add-f-label">城市：</label></th>
        <td>
          <div>
            <select name="city" class="js_cityList" style="width:200px;">
              <option value="">请选择城市</option>
            </select>
          </div>
        </td>
      </tr>
      <tr {if !$area.city}style="display:none"{/if}>
        <th><label for="" class="add-f-label">区县：</label></th>
        <td>
          <div>
            <select name="county" class="js_countyList" style="width:200px;">
              <option value="">请选择区(县)</option>
            </select>
          </div>
        </td>
      </tr>
      <!-- <tr {if !$area.county}style="display:none"{/if}>
        <th><label for="" class="add-f-label">详细地址：</label></th>
        <td>
          <div>
            <input type="text" name="detail" value="{$area.detail}">
          </div>
        </td>
      </tr> -->
      <tr>
        <th>&nbsp;</th>
        <td class="noborder">
          <button type="submit" class="btn btn-success js_submit">&nbsp;&nbsp;&nbsp;确认&nbsp;&nbsp;&nbsp;</button>
        </td>
      </tr>

    </table>
  </form>
</div>
<!--end:省市区新增-->
<script>
//初始化省份列表
$.ajax({
  url : 'area/admin/ajax_get_provinces',
  type : 'get',
  dataType : 'json',
  success : function(province_list){
    for (var i in province_list) {
      var opt = $('<option value="'+province_list[i]['area_code']+'">'+province_list[i]['area']+'</option>');
      $('.js_provinceList').append(opt);
    }

    {if $area['province']}
      $('.js_provinceList').val("{$area['province']}");
      //触发请求
      $('.js_provinceList').change();
    {/if}

    {if $area['city']}
      $('.js_provinceList').val("{$area.province}");
      $('.js_cityList').val("{$area.city}");
      $('.js_cityList').change();
      $('.js_countyList').val("{$area['county']}");
    {/if}
  }
});


$(function(){
  $('.js_provinceList').change(function(){
    //获取值
    if($(this).val() !== ''){
      var province = $(this).val();
      $('.js_cityList').parents('tr').slideDown();
      $('.js_countyList').parents('tr').slideUp();
    }else{
      $('.js_cityList').parents('tr').slideUp();
      $('.js_countyList').parents('tr').slideUp();
      
      return false;
    }
    $('.js_cityList').empty();
    $('.js_cityList').append('<option value="">请选择城市</option>');
    $('.js_countyList').empty();
    $('.js_countyList').append('<option value="">请选择区(县)</option>');

    //发送ajax
    $.ajax({
      url : 'area/admin/ajax_get_citys?province_code='+province,
      success : function(city_list){
        for (var i in city_list) {
          var opt = $('<option value="'+city_list[i]['area_code']+'">'+city_list[i]['area']+'</option>');
          $('.js_cityList').append(opt);
        }

        {if $area.city}
          $('.js_cityList').val("{$area.city}");
        {/if}
      },
      type : 'get',
      dataType : 'json',
      async : false,
    });


  });
  //城市
  $('.js_cityList').change(function(){
    if ( $('.js_provinceList').val() === '' || $('.js_cityList').val() === '') {
      $('.js_countyList').parents('tr').slideUp();
      return false;
    } else {
      $('.js_countyList').parents('tr').slideDown();
    }

    $('.js_countyList').empty();
    $('.js_countyList').append('<option value="">请选择区(县)</option>');

    //获取省份的key和值
    var province_code = $('.js_provinceList').val();
    var pro_text = $('.js_provinceList').text();

    //获取城市的值
    var city_code = $(this).val();

    //发送ajax
    $.ajax({
      url : 'area/admin/ajax_get_countys?province_code='+province_code+'&city_code='+city_code,
      type : 'get',
      dataType : 'json',
      success : function(county_list){
        for (var i in county_list) {
          var opt = $('<option value="'+county_list[i]['area_code']+'">'+county_list[i]['area']+'</option>');
          $('.js_countyList').append(opt);
        }

        {if $area['county']}
          $('.js_countyList').parents('tr').slideDown();
          $('.js_countyList').val("{$area['county']}");
        {/if}
      }
    });
    
  });

  // 提交验证
  $('.js_submit').click(function(e){
    e.preventDefault();

    if(!$('.js_provinceList').val()){
      showMsg('未请选择省份!');
      return false;
    }

    $('.js_creatForm').submit();
  });
});
</script>
{include_core file="admin/lib/footer.html"}